<div style="margin-top:15px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="屏幕掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>

	<template>
    <a-form :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
      <a-card
        v-for="(p,index) in programmes"
        :key="p.id"
        style="margin-bottom: 1px;">

        <div style="width: 80%; display: inline-block;">
          标题栏：&emsp;
          <a-input v-model:value="programmes[index].prefix" style="width: 20%;" placeholder="时间" @change="programmes[index].dirty=true"></a-input>
          &emsp;
          <a-input v-model:value="programmes[index].title" style="width: 20%;" placeholder="标题" @change="programmes[index].dirty=true"></a-input>
          &emsp;
          <a-select
            v-model:value="programmes[index].suffixType"
            style="width: 15%;"
            @change="programmes[index].dirty=true"
          >
            <a-select-option value="normal">文本</a-select-option>
            <a-select-option value="combat">对抗</a-select-option>
          </a-select>
          <br/>
          副标题：&emsp;
          <a-input v-model:value="programmes[index].subtitles[0]" style="width: 20%;" @change="programmes[index].dirty=true"></a-input>
          &emsp;
          <a-input v-model:value="programmes[index].subtitles[1]" style="width: 20%;" @change="programmes[index].dirty=true"></a-input>
          <br/>
          <template v-for="(suffix,suffixIndex) in p.suffix">
            表演者 {{suffixIndex+1}}：&emsp;
            <a-input v-model:value="programmes[index].suffix[suffixIndex]" style="width: 20%;" @change="p.dirty=true"></a-input>
            <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="programmes[index].suffix.splice(suffixIndex,1);programmes[index].dirty=true" v-if="suffixIndex!=0">
              <a-icon type="minus"></a-icon>
            </a-button>
            <br/>
          </template>
          <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="programmes[index].suffix.push('');programmes[index].dirty=true">
            <a-icon type="plus"></a-icon>
          </a-button>
        </div>

        <!-- 辅助 -->
        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnSwitch(index,index-1)" :disabled="index==0">
          <a-icon type="up"></a-icon>
        </a-button>
        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnSwitch(index,index+1)" :disabled="index==programmes.length-1">
          <a-icon type="down"></a-icon>
        </a-button>
        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnRemove(index)">
          <a-icon type="minus"></a-icon>
        </a-button>
        <a-tag color="pink" v-if="p.dirty">已修改</a-tag>
      </a-card>
      <!-- <a-form-item key="last+" style="margin-bottom: 1px;">
        <a-button type="dashed" style="width: 15%" @click="btnAdd(paths.length)">
          结尾添加
        </a-button>
      </a-form-item> -->

      <a-form-item key="commit" style="margin-bottom: 1px; margin-top: 30px;">
        <a-button type="primary" @click="btnUpdateSubmit()">
          提交
        </a-button>
        &emsp;
        <a-button style="margin-left: 28px;" @click="btnRefresh()">
          刷新
        </a-button>
      </a-form-item>

      <br/><br/>
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240)"
        title="添加新内容"
      />
      <a-card style="margin-bottom: 1px;">
        <div style="width: 80%; display: inline-block;">
          标题栏：&emsp;
          <a-input v-model:value="nPrefix" style="width: 20%;" placeholder="时间"></a-input>
          &emsp;
          <a-input v-model:value="nTitle" style="width: 20%;" placeholder="标题"></a-input>
          &emsp;
          <a-select v-model:value="nSuffixType" style="width: 15%;">
            <a-select-option value="normal">文本</a-select-option>
            <a-select-option value="combat">对抗</a-select-option>
          </a-select>
          <br/>
          副标题：&emsp;
          <a-input v-model:value="nSubtitles[0]" style="width: 20%;"></a-input>
          &emsp;
          <a-input v-model:value="nSubtitles[1]" style="width: 20%;"></a-input>
          <br/>
          <template v-for="(suffix,suffixIndex) in nSuffix">
            表演者 {{suffixIndex+1}}：&emsp;
            <a-input v-model:value="nSuffix[suffixIndex]" style="width: 20%;"></a-input>
            <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="nSuffix[suffixIndex].splice(suffixIndex,1)" v-if="suffixIndex!=0">
              <a-icon type="minus"></a-icon>
            </a-button>
            <br/>
          </template>
          <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="nSuffix[suffixIndex].push('')">
            <a-icon type="plus"></a-icon>
          </a-button>
        </div>
      </a-card>
      <a-form-item key="commit" style="margin-bottom: 1px; margin-top: 30px;">
        <a-button type="primary" @click="btnCreateSubmit()">
          添加
        </a-button>
      </a-form-item>
    </a-form>
  </template>
</div>
<div v-else>
	空
</div>
